<template>
  <div>
    <svg
      v-if="isscreen == true"
      class="screenfull-svg"
      height="32"
      p-id="2069"
      t="1508738709248"
      version="1.1"
      viewBox="0 0 1024 1024"
      width="32"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      @click="click"
    >
      <path
        d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z"
        p-id="2070"
      />
      <path
        d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z"
        p-id="2071"
      />
      <path
        d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z"
        p-id="2072"
      />
      <path
        d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z"
        p-id="2073"
      />
    </svg>
    <svg
      v-if="isscreen == false"
      class="screenfull-svg"
      height="32"
      p-id="5283"
      t="1563880671008"
      version="1.1"
      viewBox="0 0 1028 1024"
      width="32"
      xmlns="http://www.w3.org/2000/svg"
      @click="click"
    >
      <path
        d="M984.626 274.883l-161.96-0.592 181.72-180.643c19.868-20.084 19.868-52.605 0-72.634-19.975-20.03-52.281-20.03-72.15 0L748.74 203.54l1.238-165.19c0.485-20.73-15.883-38.767-36.505-38.282h-26.114c-20.622 0.538-37.69 12.868-38.12 33.598l-1.078 286.606c0 0.377 1.346 0.646 1.346 1.023l-1.992 18.791c-0.161 10.338 2.262 19.653 8.938 26.275 6.569 6.73 15.83 10.769 26.114 10.5l18.63-0.377c0.43 0 0.7-0.162 1.076-0.216l286.983 1.616c20.622-0.485 37.637-17.607 38.175-38.39v-26.33c-3.123-24.444-22.237-38.766-42.805-38.282z m40.867 436.936l-0.054-26.33c-0.485-20.783-17.445-37.905-37.96-38.39l-285.475 1.562c-0.43 0-0.7-0.162-1.077-0.162l-18.575-0.43c-10.23-0.323-19.438 3.769-26.007 10.445-6.622 6.677-9.045 15.991-8.83 26.383l1.992 18.791c0 0.377-1.346 0.646-1.346 1.023l1.077 284.399c0.43 20.73 17.391 33.06 37.96 33.544l27.675 0.054c20.514 0.484 36.774-17.607 36.29-38.336l-1.185-161.852 182.743 181.397c19.76 20.03 51.959 20.03 71.773 0s19.814-52.551 0-72.635L821.966 749.024l160.883-0.592c20.46 0.538 39.52-12.169 42.644-36.613zM369.04 658.568c-6.57-6.677-15.83-10.769-26.114-10.446l-18.684 0.431c-0.323 0-0.646 0.162-1.023 0.162l-283.16-1.616c-20.568 0.485-37.636 17.607-38.12 38.39l-0.054 26.33c3.122 24.444 22.237 37.097 42.805 36.72l159.698 0.593L21.16 931.336c-19.922 20.084-19.922 52.605 0 72.634s52.174 20.03 72.096 0l183.497-182.473-1.239 160.882c-0.484 20.73 15.884 38.767 36.452 38.283h26.168c20.622-0.539 37.69-12.815 38.12-33.598l1.077-282.353c0-0.377-1.346-0.646-1.346-1.023l2.046-18.79c0.108-10.339-2.315-19.654-8.991-26.33z m8.237-338.295l-1.076-286.606C375.824 12.937 358.809 0.553 338.295 0.015H310.62c-20.514-0.43-36.775 17.607-36.29 38.282l1.238 164.06L92.88 21.014c-19.868-20.03-52.012-20.03-71.826 0s-19.815 52.55 0 72.634L201.965 274.29l-159.375 0.592C22.13 274.4 3.123 288.721 0 313.165l0.054 26.33c0.484 20.783 17.445 37.905 37.96 38.39l285.474-1.616c0.377 0.054 0.647 0.216 1.023 0.216l18.576 0.43c10.23 0.27 19.491-3.768 26.006-10.499 6.623-6.676 9.046-15.991 8.83-26.383l-2.045-18.791c0-0.377 1.4-0.592 1.4-0.97z"
        p-id="5284"
      />
    </svg>
  </div>
</template>

<script>
  import screenfullModule from 'screenfull'
  export default {
    name: 'ScreenfullM',
    props: {
      width: {
        type: Number,
        default: 22,
      },
      height: {
        type: Number,
        default: 22,
      },
      fill: {
        type: String,
        default: '#48576a',
      },
    },
    data() {
      return {
        isFullscreen: true,
        isscreen: true,
      }
    },
    mounted() {
      this.$dgiotBus.$emit('isshow', '全屏')
    },
    methods: {
      click() {
        if (screenfullModule.isFullscreen == true) {
          this.isscreen = true
          this.$dgiotBus.$emit('isshow', '全屏')
        } else {
          this.isscreen = false
          this.$dgiotBus.$emit('isshow', '退出全屏')
        }
        if (!screenfullModule.enabled) {
          this.$message({
            message: 'you browser can not work',
            type: 'warning',
          })
          return false
        }
        screenfull.toggle()
      },
    },
  }
</script>

<style scoped>
  .screenfull-svg {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
    cursor: pointer;
    fill: #ffffff;
  }
</style>
